<template>
  <div class="pdf_wrap p_30">
    <div id="pdfPrint">
      <div>
        <div style="display: flex;justify-content: center;">
          <h3>销售订单</h3>
        </div>
        <div style="display: flex;align-items: center;">
          <div style="width: 80%;display: flex;flex-wrap: wrap;">
            <div :style="{width:dataInfo.topList.length<7?'50%':'33%'}"
                 v-for="(item,index) in dataInfo.topList" :key="index">
              {{ item.label }}:{{ item.value }}
            </div>
          </div>
          <div style="width: 20%">
            <div class="qrcode" ref="qrCodeUrl"></div>
          </div>
        </div>
        <table style="border: 0;border-collapse:collapse;">
          <tr v-for="(item,index) in dataInfo.table" :key="index" style="border: 0">
            <td v-for="(each,idx) in item.list" :key="idx" style="border: 1px solid black">
              {{ item[`${each}`] }}
            </td>
          </tr>
        </table>
        <div style="display: flex;flex-wrap: wrap;">
          <div style="width: 50%" v-for="(item,index) in dataInfo.bottomList" :key="index">
            {{ item.label }}:{{ item.value }}
          </div>
        </div>
      </div>
    </div>
    <div class="m_t_30 flex_row">
      <el-button type="primary" @click="handleCreatePdf()">导出pdf</el-button>
      <el-button type="primary" @click="handlePrint()">打印</el-button>
    </div>

    <div class="m_t_30">
      <table style="border: 0;border-collapse:collapse;">
        <tr>
          <td colspan="8" style="border: 1px solid black">集团名称阿里巴巴国际站</td>
        </tr>
        <tr>
          <td colspan="8" style="border: 1px solid black">成品检测报告</td>
        </tr>
        <tr>
          <td colspan="1" style="border: 1px solid black">样品名</td>
          <td colspan="3" style="border: 1px solid black">adadada</td>
          <td colspan="1" style="border: 1px solid black">样品编号</td>
          <td colspan="3" style="border: 1px solid black">BK147852369</td>
        </tr>
        <tr>
          <td colspan="1" style="border: 1px solid black">送样人</td>
          <td colspan="3" style="border: 1px solid black">张三</td>
          <td colspan="1" style="border: 1px solid black">样品来源</td>
          <td colspan="3" style="border: 1px solid black">一车间</td>
        </tr>
        <tr>
          <td colspan="1" style="border: 1px solid black">规格</td>
          <td colspan="2" style="border: 1px solid black">1kg/盒</td>
          <td colspan="1" style="border: 1px solid black">生产日期</td>
          <td colspan="1" style="border: 1px solid black">2023/05/08</td>
          <td colspan="1" style="border: 1px solid black">抽样日期</td>
          <td colspan="2" style="border: 1px solid black">2023/05/08</td>
        </tr>
        <tr>
          <td colspan="1" style="border: 1px solid black">采样量</td>
          <td colspan="4" style="border: 1px solid black">11</td>
          <td colspan="1" style="border: 1px solid black">检测日期</td>
          <td colspan="2" style="border: 1px solid black">2023/05/08</td>
        </tr>
        <tr>
          <td colspan="1" style="border: 1px solid black">执行标准</td>
          <td colspan="7" style="border: 1px solid black">11</td>
        </tr>
        <tr>
          <td colspan="8" style="border: 1px solid black">检测结果</td>
        </tr>
        <tr>
          <td :rowspan="(tableData.dong.list.length + 1)" style="border: 1px solid black">{{ tableData.dong.name }}</td>
          <td colspan="2" style="border: 1px solid black">项目</td>
          <td colspan="2" style="border: 1px solid black">技术指标</td>
          <td colspan="2" style="border: 1px solid black">检测结果</td>
          <td colspan="1" style="border: 1px solid black">判定</td>
        </tr>
        <tr v-for="(item,index) in tableData.dong.list" :key="index">
          <td colspan="2" style="border: 1px solid black">{{ item.xm }}</td>
          <td colspan="2" style="border: 1px solid black">{{ item.jszb }}</td>
          <td colspan="2" style="border: 1px solid black">{{ item.jcjg }}</td>
          <td colspan="1" style="border: 1px solid black">{{ item.pd }}</td>
        </tr>
        <tr>
          <td colspan="1" style="border: 1px solid black">项目</td>
          <td colspan="1" style="border: 1px solid black">技术指标</td>
          <td colspan="1" style="border: 1px solid black">检测值</td>
          <td colspan="1" style="border: 1px solid black">判定</td>
          <td colspan="1" style="border: 1px solid black">项目</td>
          <td colspan="1" style="border: 1px solid black">技术指标</td>
          <td colspan="1" style="border: 1px solid black">检测值</td>
          <td colspan="1" style="border: 1px solid black">判定</td>
        </tr>
        <tr v-for="(item,index) in tableData.dong2">
          <td colspan="1" style="border: 1px solid black">{{ item.left.xm }}</td>
          <td colspan="1" style="border: 1px solid black">{{ item.left.jszb }}</td>
          <td colspan="1" style="border: 1px solid black">{{ item.left.jcz }}</td>
          <td colspan="1" style="border: 1px solid black">{{ item.left.pd }}</td>
          <td colspan="1" style="border: 1px solid black">{{ item.right ? item.right.xm : `` }}</td>
          <td colspan="1" style="border: 1px solid black">{{ item.right ? item.right.jszb : `` }}</td>
          <td colspan="1" style="border: 1px solid black">{{ item.right ? item.right.jcz : `` }}</td>
          <td colspan="1" style="border: 1px solid black">{{ item.right ? item.right.pd : `` }}</td>
        </tr>
        <tr>
          <td colspan="1" style="border: 1px solid black">结论</td>
          <td colspan="7" style="border: 1px solid black">经抽样检测，该批次产品合格，同意出厂</td>
        </tr>
        <tr>
          <td colspan="5" style="border: 1px solid black"></td>
          <td colspan="1" style="border: 1px solid black">报告日期</td>
          <td colspan="2" style="border: 1px solid black">2023-11-03</td>
        </tr>
        <tr>
          <td colspan="1" style="border: 1px solid black">检验员</td>
          <td colspan="2" style="border: 1px solid black"></td>
          <td colspan="1" style="border: 1px solid black">审核</td>
          <td colspan="1" style="border: 1px solid black"></td>
          <td colspan="1" style="border: 1px solid black">批准</td>
          <td colspan="2" style="border: 1px solid black"></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import print from 'print-js'
import QRCode from 'qrcodejs2'
import CommonUtils from "ysy-utils/utils/common-utils";

export default {
  name: "Pdf",
  data() {
    return {
      dataInfo: {},
      tableData: {},
    };
  },
  created() {
    this.mockData()
    this.mockData3()
    // this.mockData2()
    this.dataInfo.table.map(item => {
      item.list = Object.keys(item)
      return item
    })
  },
  mounted() {
    this.creatQrCode()
  },
  methods: {
    mockData3() {
      this.tableData = {
        dong: {
          name: `感官检验`,
          list: [{
            xm: `气味`,
            jszb: `无异味`,
            jcjg: `无异味`,
            pd: `合格`,
          }, {
            xm: `颜色`,
            jszb: `红色`,
            jcjg: `红色`,
            pd: `合格`,
          }],
        },
        dong2: [],
      }
      const dong2 = [{
        xm: `录华纳`,
        jszb: `0.5-1.9`,
        jcz: `0.9`,
        pd: `合格`,
      }, {
        xm: `录华纳`,
        jszb: `0.5-1.9`,
        jcz: `0.9`,
        pd: `合格`,
      }, {
        xm: `氰化钠`,
        jszb: `0.5-1.9`,
        jcz: `0.9`,
        pd: `合格`,
      }, {
        xm: `高锰酸钾`,
        jszb: `0.5-1.9`,
        jcz: `0.9`,
        pd: `合格`,
      }, {
        xm: `山里话务`,
        jszb: `0.5-1.9`,
        jcz: `0.9`,
        pd: `合格`,
      }]
      let object = {}
      dong2.forEach((each, index) => {
        if (index % 2 === 0) {
          object = {}
          object.left = Object.assign({}, each)
        } else {
          object.right = Object.assign({}, each)
        }

        if (index === dong2.length - 1 || index % 2 !== 0) {
          this.tableData.dong2.push(object)
        }
      })
    },
    mockData2() {
      this.dataInfo.topList.push({
        label: `联系人1`,
        value: `Tesla`,
      })
      this.dataInfo.topList.push({
        label: `联系电话2`,
        value: `15511112222`,
      })
      this.dataInfo.topList.push({
        label: `联系电话3`,
        value: `15511112222`,
      })
      this.dataInfo.topList.push({
        label: `联系电话3`,
        value: `15511112222`,
      })
    },
    mockData() {
      const data = {
        topList: [{
          label: `客户名称`,
          value: `今日优鲜(武汉)供应链管理有限公司-杨启`,
        }, {
          label: `单据编号`,
          value: `SZP230516001`,
        }, {
          label: `客户地址`,
          value: `12314`,
        }, {
          label: `制单日期`,
          value: `2023-05-16`,
        }, {
          label: `联系人`,
          value: `123131`,
        }, {
          label: `联系电话`,
          value: `15511112222`,
        }],
        table: [{
          tr1: `物料编码`, tr2: `物料名称`, tr3: `件重`, tr4: `件数`, tr5: `规格`, tr6: `单位`, tr7: `总数量`, tr8: `单价`, tr9: `金额`
        }, {
          tr1: `D123456789`,
          tr2: `香酥鸡蛋堡`,
          tr3: `12`,
          tr4: `20.00`,
          tr5: `12*8`,
          tr6: `公斤`,
          tr7: `15`,
          tr8: `15.00`,
          tr9: `15.00`
        }, {
          tr1: `D123456789`,
          tr2: `香酥鸡蛋堡`,
          tr3: `12`,
          tr4: `15.00`,
          tr5: `12*8`,
          tr6: `公斤`,
          tr7: `20`,
          tr8: `20.00`,
          tr9: `20.00`
        },],
        bottomList: [{
          label: `公司名称`,
          value: `阿斯达是的撒阿斯蒂芬`,
        }, {
          label: `经办人`,
          value: `阿打发`,
        }, {
          label: `公司地址`,
          value: `发放大是大非沙发上`,
        }, {
          label: `联系方式`,
          value: `打发舒服`,
        },],
        qrCodeData: `ysy123456`,
      }
      this.dataInfo = data
    },
    creatQrCode() {
      const qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.dataInfo.qrCodeData, // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    handleCreatePdf() {
      this.getPdf()
    },
    handlePrint() {
      setTimeout(_ => {
        print({
          printable: 'pdfPrint',	//打印区域id
          type: 'html',		//打印类型是html
          scanStyles: false,
          targetStyles: ['*'],
        })
      }, 500)
    },
  }
};
</script>
<style scoped>

</style>
